@function rem($s){
    @return ($s/64)*1rem
}
$testbord:1px solid #e3e3e3;
$sub-color:#727272;

body{
    // background: red;
}
.user-banner{
    img{
        width: 100%;
    }
}

.user-banner{
    position: relative;
}
.main-body{
    width: 88%;
    height: 450px;
    margin: 0 auto;
    // border:$testbord;
    position: relative;
    top:rem(-80);
    background: white;
    margin-bottom: rem(800);
}
.user-photo{
    width: rem(130);
    height: rem(130);
    position: absolute;
    left: 50%;
    top:rem(-60);
    transform: translate(-50%,0);
    background: white;
    // margin-bottom: -40px;
    border: $testbord;
    border-radius: 50%;
    z-index: 150;
    .inner-user-photo{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
    }
    .leve-ico{
        position: absolute;
        left: 0;
        top: 0;
        width:rem(30);
        height: rem(30);
        border-radius: 50%;
        border:$testbord;
        // background: white;
        z-index: 200;
        overflow: hidden;
    }
    img{
        width: 100%;
        vertical-align: top;
    }
}
.user-main-resour{
    width: 100%;
    // height: rem(180);
    // border: $testbord;
    padding-top: rem(90);
    padding-bottom: rem(30);
    background: white;
    // box-shadow: 0 2px 8px #e2e2e2;
    position: relative;
    .title{
        font-size:rem(32);
        font-weight: bold;
    }
    .sub-txt{
        color:#666;
    }
}
.section-1{
    box-shadow: 0 2px 8px #e2e2e2;
    
}
.user-ul{
    padding: 0 2%;
    background: white;
    margin-top: 8px;
    border: 1px solid #f7f7f7;
    box-shadow: 0 2px 8px #e2e2e2;
    font-size: rem(22);
    
}

.us-ul-list{
    border-bottom: $testbord;
    padding: 3.4% 3.6%;
    position: relative;
    &:last-child{
        border-bottom: none;
    }
    .ab-ico{
        position: absolute;
        right:-1.2%;
        top:rem(18);
        width:8px;
        height:8px;
        img{
            width: 100%;
        }
    }
    .left-span{
        width: 30%;
        float: left;
        color: #212121;
    }
    .right-span{
        width:68%;
        float: right;
        text-align: right;
        color: #666;
    }
}


.back-arrow {
    position: absolute;
    width: 36px;
    height: 36px;
    /* border: 1px solid red; */
    left: 2.5%;
    top:4%;
    // transform: translate(0,-50%);
}

.descript{
    text-align: justify;
    color: #999;
    padding-bottom: rem(18);
    font-size: rem(24);
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 2.6%;
}
.big-txt{
    font-size: rem(40);
    color:red;
    font-weight: bold;
}

.progress{
    width:98.5%;
    height: 4px;
    border-radius: 2.8px;
    overflow: hidden;
    border:1px solid #f3f3f3;
    position: absolute;
    background: #f5f5f5;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    .pro-cont{
        width:0%;
        background: #4693D6;
        height: 4px;
        border-radius: 2.8px;
        transition: all 0.9s ease-out;
    }
}
.nomore-endsection{
    margin-top: rem(250);
}

.show-ul{
    padding: 2.8% 0;
    margin-top: 0;
    box-shadow: none;
    border: none;
}

.show-fans{
    float: left;
    box-sizing: border-box;
    width: 25%;
    // height: rem(40);
    padding:0.8% 0;
    border-right:$testbord;
    font-size: rem(24);
    color: #909090;
    &:last-child{
        border-right: none;
    }
    .imgbox{
        width:rem(55);
        margin: 0 auto;
        margin-bottom: 4px;
    }
}

.about-person{
    // border: $testbord;
    margin-top: rem(20);
    background: white;
    padding: 2%;
    .title{
        font-size: rem(28);
        margin-bottom: 8px;
        font-weight: bold;
        color: #999;
        border-left: 4px solid #7db715;
        padding-left: 8px;
    }
}
.about-ul{
    width: 80%;
}
.ab-ul-list{
    float: left;
    width:16.6%;
    padding: 1px;
    box-sizing: border-box;
    margin-bottom: 4px;
    img{
        width: 100%;
    }
}